<template>
  <!-- 
     机台号：1 
     生产状态： 
     品种:TeI(LF)-S100 AAJMF 
     班次开始时间:05/15 06:40 
     班次结束时间:05/15 06:40 
     更新时间:05/15 06:40 
     当前班产:2280米 
     运行效率:100.00% 
     当前长度:4709 
     千锭时断头:1 
     锭速:15363 
     前罗拉速度:110 -->
  <div class="info-container">
    <div class="info-title">基础信息</div>
    <div class="info-item">
      <img :src="machineNumber" alt="" />
      {{ $t('custom.机台号') }}:{{ data?.machineName }}
    </div>
    <div class="info-item">
      <img :src="productStatus" alt="" />
      {{ $t('custom.生产状态') }}:
      <!-- <el-tag :color="zhuanTai.color(data?.stateCode)" effect="dark">
        {{ zhuanTai.text(data?.stateCode) }}
      </el-tag> -->
    </div>
    <div class="info-item">
      <img :src="variety" alt="" />
      {{ $t('custom.品种') }}:{{ data?.materialName }}
    </div>
    <div class="info-item">
      <img :src="startTime" alt="" />
      {{ $t('custom.班次开始时间') }}:{{ data?.start && dayjs(data?.start).format('MM/DD HH:mm') }}
    </div>
    <div class="info-item">
      <img :src="endTime" alt="" />
      {{ $t('custom.班次结束时间') }}:{{ data?.end && dayjs(data?.end).format('MM/DD HH:mm') }}
    </div>
    <div class="info-item">
      <img :src="startTime" alt="" />
      {{ $t('custom.更新时间') }}:{{
        data?.lastModificationTime && dayjs(data?.lastModificationTime).format('MM/DD HH:mm')
      }}
    </div>
    <div class="info-item">
      <img :src="currentProduction" alt="" />
      {{ $t('custom.当前班产') }}:{{ data?.currentShiftLength }}{{ $t('custom.米') }}
    </div>
    <div class="info-item">
      <img :src="efficiency" alt="" />
      {{ $t('custom.运行效率') }}:{{ data?.runEfc && Math.round(data?.runEfc / 100) / 100 }}%
    </div>
    <div class="info-item">
      <img :src="currentLength" alt="" />
      {{ $t('custom.当前长度') }}:{{ data?.currentLength }}
    </div>
    <div class="info-item">
      <img :src="breakCntPerKilo" alt="" />
      {{ $t('custom.千锭时断头') }}:{{ data?.breakCntPerKilo }}
    </div>
    <div class="info-item">
      <img :src="speedAvg1" alt="" />
      {{ $t('custom.锭速') }}:{{ data?.speedAvg1 }}
    </div>
    <div class="info-item">
      <img :src="speedAvg2" alt="" />
      {{ $t('custom.前罗拉速度') }}:{{ data?.speedAvg2 }}
    </div>
  </div>
</template>
<script setup lang="ts">
  import dayjs from 'dayjs'
  import { zhuanTai } from '@/utils/custom/index'
  import breakCntPerKilo from '@/assets/images/device-monitor/breakCntPerKilo.png'
  import currentLength from '@/assets/images/device-monitor/currentLength.png'
  import currentProduction from '@/assets/images/device-monitor/currentProduction.png'
  import efficiency from '@/assets/images/device-monitor/efficiency.png'
  import startTime from '@/assets/images/device-monitor/startTime.png'
  import endTime from '@/assets/images/device-monitor/endTime.png'
  import machineNumber from '@/assets/images/device-monitor/machineNumber.png'
  import productStatus from '@/assets/images/device-monitor/productStatus.png'
  import speedAvg1 from '@/assets/images/device-monitor/speedAvg1.png'
  import speedAvg2 from '@/assets/images/device-monitor/speedAvg2.png'
  import variety from '@/assets/images/device-monitor/variety.png'
  defineProps({
    data: {
      type: Object,
      default: () => {}
    }
  })
</script>
<style scoped lang="scss">
  .info-title {
    margin: 5px 0 14px 0;
    color: #202121;
    font-size: 16px;
    font-weight: bold;
  }
  .info-item {
    // height: 16px;
    font-size: 14px;
    color: #4f5759;
    // line-height: 25px;
    margin-top: 8px;
    img {
      width: 20px;
      height: 20px;
      margin-right: 9px;
      vertical-align: sub;
    }
  }
</style>
